import React, { useState } from 'react';
import styles from './style.less';
import { Input, Button, Row, Col, Modal } from 'antd';
import { User_Register } from '@/services/api';
import { history } from 'umi';
import background from '@/img/login.png';
function Register() {
  return (
    <div>
      <RegiserCom />
    </div>
  );
}

function RegiserCom() {
  const [userName, SetUserName] = useState('');
  const [password, setPassword] = useState('');
  const [phoneNumber, setPhoneNumber] = useState('');
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');

  const [isModalVisible, setVisible] = useState(false);
  const [isModalVisible2, setVisible2] = useState(false);
  const [isModalVisible1, setVisible1] = useState(false);

  async function register() {
    if (
      userName == '' ||
      password == '' ||
      phoneNumber == '' ||
      address == '' ||
      email == ''
    ) {
      setVisible1(true);
    } else {
      try {
        User_Register(userName, password, phoneNumber, address, email).then(
          res => {
            console.log(res);
            if (res === 0) {
              setVisible(true);
            } else if (res === -1) {
              setVisible2(true);
            }
          },
        );
      } catch (error) {
        console.log(error);
      }
    }
  }

  function handleUserName(e: any) {
    SetUserName(e.target.value);
    console.log(userName);
  }

  function handleAddress(e: any) {
    setAddress(e.target.value);
    console.log(address);
  }

  function handleNumber(e: any) {
    setPhoneNumber(e.target.value);
    console.log(phoneNumber);
  }

  function handleEmail(e: any) {
    setEmail(e.target.value);
    console.log(email);
  }

  function handlePw(e: any) {
    setPassword(e.target.value);
    console.log(password);
  }

  function handleOK() {
    history.push(`/login`);
  }

  function handleOK1() {
    setVisible1(false);
  }
  function handleOK2() {
    setVisible2(false);
  }
  return (
    <div className={styles.background}>
      <img src={background} alt="" />
      <div className={styles.loginblock}>
        <div className={styles.logininner}>
          {' '}
          <Modal title="提示" visible={isModalVisible} footer={null}>
            <div className={styles.modal}>
              <h3>点击确定跳转到登录页面</h3>
              <Button onClick={handleOK} type="primary">
                确定
              </Button>
            </div>
          </Modal>
          <Modal
            title="提示"
            visible={isModalVisible2}
            onOk={handleOK2}
            onCancel={handleOK2}
          >
            <div className={styles.modal}>
              <h3>手机号已存在</h3>
            </div>
          </Modal>
          <Modal
            title="提示"
            visible={isModalVisible1}
            onOk={handleOK1}
            onCancel={handleOK1}
          >
            <div className={styles.modal}>
              <h3>请填写所有信息项</h3>
            </div>
          </Modal>
          <Row gutter={[1, 45]}>
            <Col className="gutter-row" span={6}>
              <h3>请输入用户名：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input
                value={userName}
                onChange={handleUserName}
                placeholder="请输入用户名"
              />
            </Col>

            <Col className="gutter-row" span={6}>
              <h3>请输入密码：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input.Password
                value={password}
                onChange={handlePw}
                placeholder="请输入密码"
              />
            </Col>

            <Col className="gutter-row" span={6}>
              <h3>请输入手机号：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input
                value={phoneNumber}
                onChange={handleNumber}
                placeholder="请输入手机号"
              />
            </Col>

            <Col className="gutter-row" span={6}>
              <h3>请输入地址：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input
                value={address}
                onChange={handleAddress}
                placeholder="请输入地址"
              />
            </Col>

            <Col className="gutter-row" span={6}>
              <h3>请输入邮箱：</h3>
            </Col>
            <Col className="gutter-row" span={18}>
              <Input
                value={email}
                onChange={handleEmail}
                placeholder="请输入邮箱"
              />
            </Col>
          </Row>
          <Button type="primary" onClick={register}>
            注册
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Register;
